<template>
    <div id="register">
        <div class="login_logo">
            <img class="icon_logo" src="/src/public/images/form/user@2x.png" alt="">
        </div>
        <div class="login-form">
            <el-row>
                <el-col :span="22" :offset="2">
                    <div class="login-form-item">
                        <inputAll set="tel" place="请输入手机号" type="number" v-model="msg.tel"></inputAll>
                    </div>
                    <div class="login-form-item">
                        <inputAll v-on:propMethods="getCode" ref="child" set="code" place="请输入验证码" type="number" v-model="msg.code"></inputAll>
                    </div>
                    <div class="login-form-read">
                        <img src="/src/public/images/form/select@2x.png" alt="">我已阅读并同意<router-link to="/form/to/register">用户协议</router-link>
                    </div>
                    <buttonAll :boo="boo" v-on:propMethods="register" type="register" value="下一步"></buttonAll>
                </el-col>
            </el-row>
        </div>
        <div class="login-form-register">
            <h3>活动规则:</h3>
            <p>①流量发放仅对广东移动有效</p>
            <p>②注册后15天内，我们会将流量以流量券的形式发送到您的岭南优品账号</p>
        </div>
        <toast msg="手机号码格式错误"></toast>
    </div>
</template>

<script>
    import inputAll from 'src/components/main/input/input-clear.vue';
    import buttonAll from 'src/components/main/button/button.vue';
    import toast from 'src/components/main/toast/toast.vue';
    import {Checks} from 'src/public/js/Verification';
    export default {
        name: 'register',

        data() {
            return {
                msg:{
                    tel:'',
                    code:''
                },

                oldTel:''
            }
        },

        methods: {
            getCode(type,cb) {
                if (type == 'word') {
                    if (Checks.CheckPhone(this.msg.tel)) {
                        this.$store.dispatch('showToast','验证码已发送~').then(() => {
                            this.oldTel = this.msg.tel;
                            cb();
                        });
                    } else {
                        this.$store.dispatch('showToast','手机格式错误');
                    }
                }
            },

            register() {
                if (this.msg.code == 1314 && Checks.CheckPhone(this.msg.tel)) {
                    if (this.oldTel != this.msg.tel) {
                        this.$store.dispatch('showToast','电话号码被修改');
                        return;
                    }
                    this.$router.push('/form/to/setPassword');
                } else {
                    this.$store.dispatch('showToast','手机验证码错误');
                }
            }
        },

        computed:{
            boo() {
                return this.msg.tel != '' && this.msg.code != '' ? true : false;
            }
        },

        components: {
            inputAll,
            buttonAll,
            toast
        },

        created() {

        }
    }

</script>

<style scoped lang="less" rel="stylesheet/less" type="text/css">
    @import '../../../public/css/variable.less';

    .icon_logo {
        width: 1.4rem;
        height: 1.4rem;
        margin-bottom: @rem * 6;
    }

    .login_tips {
        color: @orange;
        font-size: 0.24rem;
        margin-top: @rem * 3;
        margin-bottom: @rem * 7;
    }

    .login-form {
        &-item {
            text-align: left;
            margin-top: @rem * 4.5;
            img {
                width: .48rem;
                height: auto;
                vertical-align: middle;
                padding-right: @rem * 8;
            }
        }
        &-read{
            font-size:.2rem;
            text-align: left;
            margin-top: @rem * 3.1;
            margin-bottom: @rem * 4.5;
            margin-right: @rem * 9.3;
            color: #9B9B9B;
            img{
                vertical-align: middle;
                margin-right:@rem * 1.3;
            }
            a{
                color: #2a2a2a;
                text-decoration: underline;
            }
        }
    }
    .login-form-register{
        margin-top:@rem * 11.8;
        border-top:@rem * 3 solid #F2F2F2;
        padding: @rem * 2 @rem * 4;
        text-align: left;
        h3{
            font-size:.28rem;
            font-weight:bold;
        }
        p{
            font-size: .24rem;
            margin-bottom: @rem * 1.5;
            margin-top: @rem * 2.5;
            line-height: .3rem;
            width: @rem * 67.3;
        }
    }
</style>